DiscGolf.Views['modalBox'] = Backbone.View.extend( {

    tagName: 'div',

    className: '',

    events: { },
                                                  
    makeEl: DiscGolf.CommonLib.makeEl,

    initialize: function() {

        this.render();
        
        return this;
    },

    render: function() {

        if( ! $('#modalBoxContainer').length ) {

            $('body').append(
                this.makeEl( 'div' ).attr( { 'id': 'modalBoxContainer' } ).hide().append(
                    this.makeEl( 'div' ).attr( { 'id': 'modalBoxOverlay' } ),
                    this.makeEl( 'div' ).attr( { 'id': 'modalBoxContent' } ).append(
                        this.makeEl( 'div' ).attr( { 'id': 'modalBoxTitle' } ),
                        this.makeEl( 'div' ).attr( { 'id': 'modalBoxForm' } ) ) ) );

        }

        this.document = $(document);
        this.modalBoxForm = $('#modalBoxForm');
        this.modalBoxContainer = $('#modalBoxContainer');
        this.modalBoxContent = $('#modalBoxContent').css( { 'height': '', 'width': '' } );
        this.modalBoxTitle = $('#modalBoxTitle');
        
        this.modalBoxTitle.text( ( this.options.title ) ? this.options.title : '' );
    
        this.modalBoxForm.append( this.options.content );

        this.sizeAndPosition();
        
        return this;
    },

    handleKeyPress: function( e ) {

        if( e.keyCode == 27 ) { this.closeDialogue(); }

        if( e.keyCode == 13 ) { this.affirmDialogue(); }
    },

    handleClick: function( e ) {

        if( ( ! DiscGolf.CommonLib.isMouseOnElement( { x: e.pageX, y: e.pageY, el: this.modalBoxContent } ) ) ) {

            this.closeDialogue();
        }
    },

    sizeAndPosition: function() {

        this.modalBoxContainer.show();
        var contentHeight = this.modalBoxContent.outerHeight( true );
        var contentWidth = this.modalBoxContent.outerWidth( true );
        this.modalBoxContainer.hide();

        if( this.options.height ) {
    
            this.modalBoxContent.height( this.options.height );
            contentHeight = this.options.height;
            this.modalBoxForm.height( contentHeight - this.modalBoxTitle.outerHeight( true ) ); 
        }
    
        if( this.options.width ) { this.modalBoxContent.width( this.options.width ); contentWidth = this.options.width;  }
    
        this.modalBoxContent.css( { top: ( ( this.document.height() - ( contentHeight ) ) / 2 ),
                                    left: ( ( this.document.width() - ( contentWidth ) ) / 2 ) } );
    
        this.modalBoxContainer.show( 'slow', $.proxy( this.afterShow, this ) );
    },

    afterShow: function() {

        $( this.modalBoxContainer.find('input')[0] ).focus();

        this.document.on( 'keydown', $.proxy( this.handleKeyPress, this ) );
        this.document.on( 'click', $.proxy( this.handleClick, this ) );
    },

    closeDialogue: function() {

        this.modalBoxTitle.text('');
        this.modalBoxForm.empty();
        this.modalBoxContainer.hide();

        this.document.off( 'keydown', this.handleKeyPress );
        this.document.off( 'click', this.handleClick );

        this.trigger( 'closed' );
    },

    affirmDialogue: function() {
    }

} );
